<template>
  <div class="home">
    <!-- baner -->
    <van-swipe :autoplay="3000" class="swipe">
      <van-swipe-item>
        <img src="@/assets/img/banner.png" />
      </van-swipe-item>
    </van-swipe>
    <!-- nav -->
    <nav>
      <ul class="clearfix flex-row-wrap">
        <li @click="navClick('预约检测')">
          <div>
            <p>预约检测</p>
            <p>APPOINTMENT</p>
          </div>
          <img src="@/assets/img/icon/nav-1.png" />
        </li>
        <li @click="navClick('到场检测')">
          <div>
            <p>到场检测</p>
            <p>SCENE</p>
          </div>
          <img src="@/assets/img/icon/nav-2.png" />
        </li>
        <li @click="navClick('订单查询')">
          <div>
            <p>订单查询</p>
            <p>ORDER FORM</p>
          </div>
          <img src="@/assets/img/icon/nav-3.png" />
        </li>
        <li @click="navClick('进度查询')">
          <div>
            <p>进度查询</p>
            <p>SCHEDULING</p>
          </div>
          <img src="@/assets/img/icon/nav-4.png" />
        </li>
      </ul>
    </nav>
    <!-- 智能助手 -->
    <section class="assistant">
      <header class="clearfix">
        <div class="fl">
          <span class="fl"></span>
          <span class="fl"></span>
        </div>
        <strong class="fl">智能助手</strong>
      </header>
      <ul class="flex-row-wrap">
        <li @click="iconNavClick('打印单据')">
          <img src="@/assets/img/icon/icon-1.png" />
          <span>打印单据</span>
        </li>
        <li @click="iconNavClick('年检须知')">
          <img src="@/assets/img/icon/icon-3.png" />
          <span>年检须知</span>
        </li>
        <li @click="iconNavClick('年检流程')">
          <img src="@/assets/img/icon/icon-2.png" />
          <span>年检流程</span>
        </li>
        <li @click="iconNavClick('预约流程')">
          <img src="@/assets/img/icon/icon-4.png" />
          <span>预约流程</span>
        </li>
        <li @click="iconNavClick('违章查询')">
          <img src="@/assets/img/icon/icon-5.png" />
          <span>违章查询</span>
        </li>
        <li @click="iconNavClick('开具发票')">
          <img src="@/assets/img/icon/icon-6.png" />
          <span>开具发票</span>
        </li>
        <li @click="iconNavClick('问卷调查')">
          <img src="@/assets/img/icon/icon-7.png" />
          <span>问卷调查</span>
        </li>
        <li @click="iconNavClick('关于我们')">
          <img src="@/assets/img/icon/icon-8.png" />
          <span>关于我们</span>
        </li>
      </ul>
    </section>
    <!-- 优势对比 -->
    <section class="make-an-pointment">
      <header class="clearfix">
        <div class="fl">
          <span class="fl"></span>
          <span class="fl"></span>
        </div>
        <strong class="fl">优势对比</strong>
      </header>
      <div class="clearfix">
        <div class="fl left">
          <p>平常年检</p>
          <ul>
            <li class="clearfix">
              <span class="fl">1</span>
              <span class="fl">前往登记大厅</span>
            </li>
            <li class="clearfix">
              <span class="fl">2</span>
              <span class="fl">委托登记</span>
            </li>
            <li class="clearfix">
              <span class="fl">3</span>
              <span class="fl">缴费</span>
            </li>
            <li class="clearfix">
              <span class="fl">4</span>
              <span class="fl">打印申请表</span>
            </li>
            <li class="clearfix">
              <span class="fl">5</span>
              <span class="fl">环保检测登录</span>
            </li>
            <li class="clearfix">
              <span class="fl">6</span>
              <span class="fl">安全技术检测登录</span>
            </li>
            <li class="clearfix">
              <span class="fl">7</span>
              <span class="fl">上线检测</span>
            </li>
            <li class="clearfix">
              <span class="fl">8</span>
              <span class="fl">领取合格标志</span>
            </li>
          </ul>
        </div>
        <div class="fr right">
          <p>使用车检汇年检</p>
          <ul>
            <li class="clearfix">
              <span class="fl">1</span>
              <span class="fl">网上办理</span>
            </li>
            <li class="clearfix">
              <span class="fl">2</span>
              <span class="fl">到站直接上线检测</span>
            </li>
            <li class="clearfix">
              <span class="fl">3</span>
              <span class="fl">领取合格标志</span>
            </li>
          </ul>
        </div>
      </div>
    </section>
    <!-- 底部banner -->
    <div class="b-banner">
      <van-swipe :autoplay="3000" class="swipe">
        <van-swipe-item>
          <img src="@/assets/img/banner2.png" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 底 导航 -->
    <footer class="flex-row-wrap">
      <div>
        <a href="tel:0316-8961818">
          <img src="@/assets/img/icon/nav1.png" />
          <p>电话客服</p>
        </a>
      </div>

      <div @click="navBottom(2)">
        <img src="@/assets/img/icon/nav2.png" />
        <p>个人中心</p>
      </div>
      <div @click="navBottom(3)">
        <img src="@/assets/img/icon/nav3.png" />
        <p>分享</p>
      </div>
    </footer>
  </div>
</template>

<script>
import { setLocal, getLocal, delLocal } from '@/utils/storage'
export default {
  name: 'Home',
  data() {
    return {
      urlCode: this.$route.query.code,
      // 用户信息
      carUser: JSON.parse(getLocal('userInfo')),
      // 车辆信息
      vehicleList: [],
      // 是否关注公众号，1已关注 0 未关注
      isFollow: 0
    }
  },
  created() {
    this.authorizationFn()
    // this.postCarInfo()
  },
  methods: {
    //底部导航的路由
    navBottom(type) {
      if (type == 1) {
      } else if (type == 2) {
        // this.$router.push('/personalCenter')
      } else {
      }
    },
    navClick(e) {
      // if (this.isFollowFn()) return

      if (e === '预约检测') {
        if (this.vehicleList.length) {
          this.$router.push({
            name: 'makeAnAppointment',
            params: {
              state: 'convention',
              vehicleList: this.vehicleList
            }
          })

          // this.$router.push('/makeAnAppointment')
        } else {
          this.$router.push('/vehicleDetails')
        }
      }
      if (e === '到场检测') {
        if (this.vehicleList.length) {
          this.$router.push({
            name: 'vehicleInfo',
            params: {
              state: 'present',
              vehicleList: this.vehicleList
            }
          })
        } else {
          this.$router.push('/vehicleDetails')
        }
      }
      if (e === '订单查询') {
        // this.$router.push('/orderPay')
        this.$router.push('/order')
      }
      if (e === '进度查询') {
        this.$router.push('/order?state=progress')
        // this.$router.push('/progress')
        // location.href = 'https://mp.weixin.qq.com/s/3UUAO9am07UGHYDZmcKyqw'
      }
    },

    iconNavClick(e) {
      // if (this.isFollowFn()) return
      if (e === '打印单据') {
        this.$router.push('/printDocuments')
      }
    },
    //  --------------------------- ajax请求 ---------------------------
    // 查询车辆信息
    async postCarInfo() {
      let params = {
        userId: this.carUser.id
      }
      let res = await this.$api.PostCarInfo(params)

      this.vehicleList = res.data.list
      console.log(res, '------------------- 查询车辆信息 ----------------')
    },

    // 获取微信openId
    async getOpenId() {
      let res = await this.$api.getOpenId({
        code: this.urlCode
      })
      console.log(res, '-----------获取微信openId---------')
      if (res.status === 200) {
        setLocal('openid', res.data.openid)
        this.postCarUsers({
          openId: res.data.openid
        })
      }
    },
    // 查询用户信息
    async postCarUsers(params) {
      let res = await this.$api.PostCarUsers(params)
      console.log(res, '-----------查询用户信息---------')
      if (res.status === 200) {
        if (!res.data) {
          this.postRegisterUsers()
        } else {
          this.carUser = res.data.data
          setLocal('userInfo', JSON.stringify(res.data))
        }
      }
    },
    // 注册用户信息
    async postRegisterUsers() {
      let res = await this.$api.PostRegisterUsers({
        openId: getLocal('openid')
      })
      console.log(res, '-----------获取用户信息---------')
      if (res.status === 200) {
        this.carUser = res.data.data
        setLocal('userInfo', JSON.stringify(res.data))
      }
    },

    // 判断用户是否关注公众号
    async judgeIsFollow() {
      let res = await this.$api.judgeIsFollow({
        // openId: 'oUCkQsyMh901WzSxKzO6KP62WlqI'
        openId: getLocal('openid')
      })
      if (res.status === 200) {
        this.isFollow = res.data.isFollow
      }
      console.log(res, '--------- 判断用户是否关注公众号 ----------')
    },

    //  --------------------------- 方法 ---------------------------
    // 用户授权查询
    authorizationFn() {
      // debugger

      if (!localStorage.getItem('userInfo')) {
        if (
          this.$route.query.from == undefined &&
          this.$route.query.code == undefined
        ) {
          let href = location.href
          let _nowUrl = 'https://www.dccjyuyue.com/'
          window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appId=${
            process.env.VUE_APP_APPID
          }&redirect_uri=${encodeURIComponent(
            _nowUrl
          )}&response_type=code&scope=snsapi_base&state=123#wechat_redirect`
        } else {
          if (
            !localStorage.getItem('openid') ||
            localStorage.getItem('openid') === ''
          ) {
            this.getOpenId()
          }
          // this.judgeIsFollow()
          this.postCarInfo()
        }
      } else {
        // this.judgeIsFollow()
        this.postCarInfo()
      }
    },

    //
    isFollowFn() {
      if (!this.isFollow) {
        this.$toast('您还未关注公众号，不能操作哦~ ')
        return true
      }
    }
  }
}
</script>

<style lang="less" scoped>
.home {
  height: 100%;
  padding-bottom: 1.4rem;
  .swipe {
    height: 4.8rem;
    img {
      width: 100%;
      height: inherit;
    }
  }
  nav {
    li {
      flex: 0 0 42%;
      height: 2.8rem;
      position: relative;
      color: #fff;
      padding-top: 0.48rem;
      border-radius: 0.133rem;
      margin: 5% 0 0 5%;
      p {
        line-height: 0.613rem;
        text-indent: 0.4rem;
        font-size: 0.467rem;
      }
      p:nth-of-type(2) {
        line-height: 0.493rem;
        font-size: 0.373rem;
        letter-spacing: -0.027rem;
      }
      img {
        position: absolute;
      }
    }
    li:nth-of-type(1) {
      background-color: #4ba750;
      img {
        width: 1.12rem;
        right: 0.387rem;
        bottom: 0.5rem;
      }
    }
    li:nth-of-type(2) {
      background-color: #2f7cc2;
      img {
        width: 1rem;
        right: 0.387rem;
        bottom: 0.48rem;
      }
      p:nth-of-type(2) {
        text-indent: 0.88rem;
      }
    }
    li:nth-of-type(3) {
      background-color: #f18918;
      img {
        width: 1.013rem;
        right: 0.387rem;
        bottom: 0.427rem;
      }
    }
    li:nth-of-type(4) {
      background-color: #863790;
      img {
        width: 0.973rem;
        right: 0.387rem;
        bottom: 0.48rem;
      }
    }
  }
  .header {
    height: 1.36rem;
    background-color: #e0e4e7;
    div {
      margin: 0.373rem 0 0 0.24rem;
      span {
        width: 0.293rem;
        height: 0.627rem;
        background-color: #40b984;
      }
      span:nth-of-type(2) {
        background-color: #fff;
      }
    }
    strong {
      line-height: 1.36rem;
      margin-left: 0.293rem;
      font-size: 0.453rem;
      color: #000;
      font-weight: 400;
    }
  }
  .assistant {
    header {
      margin-top: 0.453rem;
      .header;
    }
    ul {
      padding: 0 0.56rem;
      text-align: center;
      line-height: 0.56rem;
      li {
        flex: 0 0 18%;
        margin-right: 0.827rem;
        padding-top: 0.36rem;
      }
      li:nth-of-type(4),
      li:nth-of-type(8) {
        margin: 0;
      }
    }
  }
  .make-an-pointment {
    padding-bottom: 0.507rem;
    header {
      .header;
      margin-bottom: 0.4rem;
    }
    .left,
    .right {
      width: 4.107rem;
      height: 6.133rem;
      border: 0.027rem solid #a1a1a1;
      border-radius: 0.16rem;
      p {
        width: 80%;
        height: 0.507rem;
        border-radius: 0.2rem;
        text-align: center;
        line-height: 0.507rem;
        margin: 0.16rem auto 0;
        background-color: #ea4d18;
        font-size: 0.213rem;
        color: #fff;
      }
      ul {
        padding-top: 0.133rem;
        li {
          margin-top: 0.24rem;
          margin-left: 0.267rem;
          span:nth-of-type(1) {
            width: 0.373rem;
            height: 0.373rem;
            line-height: 0.373rem;
            text-align: center;
            border-radius: 50%;
            border: 1px solid #555;
            font-size: 0.107rem;
            -webkit-transform-origin-x: 0;
            -webkit-transform: scale(0.9);
          }
          span:nth-of-type(2) {
            font-size: 0.347rem;
          }
        }
      }
    }
    .left {
      margin-left: 0.507rem;
    }
    .right {
      margin-right: 0.507rem;
      ul {
        li {
          margin-top: 0.907rem;
        }
      }
    }
  }
  .b-banner,
  .b-banner .swipe,
  .b-banner img {
    width: 100%;
    height: 5.36rem;
    display: block;
  }
  footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1.4rem;
    background-color: #27b5a7;
    div {
      flex: 0 0 33.3%;
      text-align: center;
      color: #fff;
      padding-top: 0.2rem;
      img {
        height: 0.56rem;
        margin: 0 auto;
        display: block;
      }
      p {
        line-height: 0.64rem;
        font-size: 0.293rem;
      }
      a {
        text-decoration: none;
        color: #fff;
      }
    }
    div:nth-of-type(1) img {
      width: 0.6rem;
    }
    div:nth-of-type(2) img {
      width: 0.64rem;
    }
    div:nth-of-type(3) img {
      width: 0.587rem;
      height: auto;
    }
  }
}
</style>
